<template>
    <v-container>
        <v-btn color="primary" @click="rechargeWithWechat">微信充值</v-btn>
        <v-dialog v-model="dialog" max-width="290">
            <template #content>
                <v-card>
                    <v-card-title>微信支付二维码</v-card-title>
                    <v-card-text>
                        <img :src="qrCodeUrl" alt="微信支付二维码" width="200" height="200" />
                    </v-card-text>
                </v-card>
            </template>
            <template #actions>
                <v-btn color="primary" text @click="dialog = false">关闭</v-btn>
            </template>
        </v-dialog>
    </v-container>
</template>

<script>
import QRCode from "qrcode";

export default {
    data() {
        return {
            dialog: false,
            qrCodeUrl: 'weixin://wxpay/bizpayurl?pr=oyrZFJcz3'
        };
    },
    created() {
        this.generateQrCode();
    },
    methods: {
        generateQrCode() {
            const qr = QRCode(0, 'L');
            qr.addData(this.qrCodeUrl);
            qr.make();
            const qrCodeHtml = qr.createImgTag(4);
            this.$refs.qrCodeContainer.innerHTML = qrCodeHtml;
            this.dialog = true
        },
    }
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>
